<template>
  <div>
    <film-swiper :loop="true" v-if="datalist.length">
      <film-swiper-item v-for="data in datalist" :key="data.id" class="filmswiperitem">
        <img :src="data.imgUrl" alt="">
      </film-swiper-item>
    </film-swiper>

    <film-header class="sticky"></film-header>

    <router-view></router-view>
  </div>
</template>

<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
import filmSwiperItem from '@/mycomponents/films/FilmSwiperItem'
import filmHeader from '@/mycomponents/films/FilmHeader'
import axios from 'axios'

export default {
  data () {
    return {
      datalist: []
    }
  },

  mounted () {
    axios.get('http://localhost:8080/banner.json').then(res => {
      // console.log(res.data.banner)
      this.datalist = res.data.banner
    })
  },

  components: {
    filmSwiper,
    filmSwiperItem,
    filmHeader
  }
}
</script>

<style lang="scss" scoped>
.filmswiperitem {
  img {
    width: 100%;
  }
}

.sticky {
  position: sticky;
  top: 0px;
  background: white;
  z-index: 100;
}
</style>
